<template>
  <div class="office">
    <menu-group v-for="group in childrenMenu" :key="group.id" :menu-info="group" />
    <pop ref="infoDialog" :info-id="infoId" />
  </div>
</template>

<script>
import MenuGroup from './menu-group.vue'
import { getOfficeMenu, subMsg } from '@/apis/office.js'
import { GET_SUB_INFO, emitter } from '@/utils/emitter'
import pop from '@/pages/webview/pop.vue'

export default {
  components: { MenuGroup, pop },
  data() {
    return {
      current: 0,
      childrenMenu: [],
      infoId: '',
    }
  },
  mounted() {
    emitter.on(GET_SUB_INFO, (item) => {
      this.infoId = item.infoId
      if (item.linkPath == '\'common-item\'') {
        this.$refs.infoDialog.open()
      } else {
        this.$refs.infoDialog.close()
      }
    })
  },
  onShow() {
    this.cleanStorageData()
    this.getMenus()
  },
  beforeDestroy() {
    emitter.off(GET_SUB_INFO)
  },
  methods: {
    async getMenus() {
      const res = await getOfficeMenu()
      this.childrenMenu = res
    },
    handleSwiperChange(e) {
      this.current = e.detail.current
    },
    handleClickTap(idx) {
      this.current = idx
    },
    cleanStorageData() {
      uni.removeStorageSync('project_form')
      uni.removeStorageSync('desc_form')
      uni.removeStorageSync('code_form')
      uni.removeStorageSync('address_form')
      uni.removeStorageSync('price_form')
      uni.removeStorageSync('hour_form')
      uni.removeStorageSync('remark_form')
      uni.removeStorageSync('begin_form')
      uni.removeStorageSync('end_form')
      uni.removeStorageSync('realbegin_form')
      uni.removeStorageSync('realend_form')
      uni.removeStorageSync('proj_edit')
      uni.removeStorageSync('storage_dept')
      uni.removeStorageSync('storage_comm')
      uni.removeStorageSync('storage_part')
      uni.removeStorageSync('storage_tech')
    },
  },
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  align-items: center;
  column-gap: 20px;
  white-space: nowrap;
  overflow-x: auto;
  padding: 0 15px;

  .tab {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    margin-bottom: 17px;
    position: relative;
    transition: all 250ms;

    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 0px;
      height: 2px;
      left: 50%;
      bottom: -7px;
      transform: translateX(-50%);
      background: #739eca;
      border-radius: 1px;
      transition: all 250ms;
    }

    &.active {
      font-weight: 600;
      &::after {
        width: 16px;
      }
    }
  }
}

.tabs::-webkit-scrollbar {
  display: none;
}
.dialog-info{
	background: #fff;
	width: 200px;
	height: 100px;
	border-radius: 5px;
	div{
		width: 100%;
		height: 50%;
	}
	div:nth-child(1){
		display: flex;
		justify-content: center;
		align-items: center;
	}
	div:nth-child(2){
		text-align: center;
	}
}
</style>
